<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../JS/jquery-1.12.4.min.js"></script>
	<script>
		$(function () {
			var $div = $('#div01');
			// 上方 上方全部
			$div.prev().css({"color": "red"});
			$div.prevAll().css({"text-indent": 50});

			// 下方	下方全部
			$div.next().css({'color': 'pink'});
			$div.nextAll().css({'text-indent': 30});

			// 反选
			$div.siblings().css({'text-decoration': 'underline'});

			// 父级
			$div.parent().css({'background': '#dddddd'});

			// 子级
			$div.children().css({'color': 'red'});

			// 找一个子级
			$div.find('.sp02').css({'font-size': 50});
		})
	</script>
</head>
<body>
	<div>
		<h2>HHHHHH222222</h2>
		<p>firstPPPPPPPP</p>
		<div id="div01">
			DDDDDIIIIIVVVVV
			<span>
				div11111
			</span>
			<span class="sp02">
				div22222
			</span>
		</div>
		<h3>HHHHHH333333</h3>
		<p>secondPPPPPPPP</p>
	</div>
</body>
</html>